<template>
  <div class="page">
    <fe-header slot="header" style="width:100%;position:absolute;left:0;top:0;z-index:100;">Rater</fe-header>
    <div class="fe-content">
      <fe-group title="Normal Usage">
        <fe-cell title="设置默认 = 5" inline-desc="总共5星如果不改变的话">
          <fe-rater v-model="data3" slot="value"></fe-rater>
        </fe-cell>
        <fe-cell title="自定义颜色">
          <fe-rater v-model="data3" slot="value" :max="6" active-color="red"></fe-rater>
        </fe-cell>
      </fe-group>

      <fe-group title="不可用">
        <fe-cell title="历史得分">
          <fe-rater v-model="data4" slot="value" disabled></fe-rater>
        </fe-cell>
        <fe-cell :title="'小数形式 ' + data41 ">
          <fe-rater v-model="data41" slot="value" active-color="red" disabled></fe-rater>
        </fe-cell>
        <fe-cell title="自定义大小(15px)">
          <fe-rater v-model="data42" slot="value" active-color="red" :font-size="15" disabled></fe-rater>
        </fe-cell>
      </fe-group>

      <fe-group title="自定义图标">
        <fe-cell title="loving">
          <fe-rater v-model="data4" slot="value" star="♡" active-color="red" :margin="15"></fe-rater>
        </fe-cell>
        <fe-cell title="Sunshine">
          <fe-rater v-model="data5" slot="value" star="☼" active-color="#4a90e2" :margin="4"></fe-rater>
        </fe-cell>
        <fe-cell title="Smilies">
          <fe-rater v-model="data5" slot="value" star="☻" active-color="#4a90e2" :margin="4"></fe-rater>
        </fe-cell>
        <fe-cell title="Different stars">
          <fe-rater v-model="data5" slot="value" star="✩" active-color="red" :margin="4"></fe-rater>
        </fe-cell>
        <fe-cell title="How embarrass">
          <fe-rater v-model="data5" slot="value" star="囧" active-color="#4a90e2" :margin="4"></fe-rater>
        </fe-cell>
        <fe-cell title="诺">
          <fe-rater v-model="data5" slot="value" star="诺" active-color="#FD6E0E" :margin="4"></fe-rater>
        </fe-cell>
      </fe-group>

      <fe-group title="联动">
        <fe-cell title="你的分数">
          <fe-rater v-model="data6" active-color="red" slot="value"></fe-rater>
        </fe-cell>
        <fe-cell title="range" primary="content" :inline-desc="data6 + ''">
          <fe-range slot="value" v-model="data6" :step="1" :min="0" :max="5"></fe-range>
        </fe-cell>
      </fe-group>
    </div>
  </div>
</template>

<script>
import {Header, Cell,Group,Range,Rater,Button} from 'feui'
  export default {
    data (){
      return{
        data1: 0,
        data2: 5,
        data3: 5,
        data4: 3,
        data41: 3.7,
        data42: 3.5,
        data5: 3,
        data6: 3
      }
    },
    components: {
      [Header.name]: Header,
      [Cell.name]: Cell,
      [Group.name]: Group,
      [Range.name]: Range,
      [Button.name]: Button,
      [Rater.name]: Rater,
      
    },
  }  
</script>

<style scoped lang="less">
</style>
